<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>贾斯纳的猫:一个适于四岁儿童益智游戏</title>
    <link href="cats-of-jasnah.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="back" onclick="set_level(Math.max(0,cur_level-1))">&larr;</div>
    <div class="forward" onclick="set_level(Math.min(7,cur_level+1))">
      &rarr;
    </div>
    <h1 onclick="window.location.reload()">贾斯纳的猫</h1>

    <div class="level-display">关卡: <span class="level-number"></span></div>

    <div class="number-bar">
      <div class="number-line">
        <button class="coj-btn" onclick="submit(0)" type="button">0</button>
        <button class="coj-btn" onclick="submit(1)" type="button">1</button>
        <button class="coj-btn" onclick="submit(2)" type="button">2</button>
        <button class="coj-btn" onclick="submit(3)" type="button">3</button>
        <button class="coj-btn" onclick="submit(4)" type="button">4</button>
        <button class="coj-btn" onclick="submit(5)" type="button">5</button>
        <button class="coj-btn" onclick="submit(6)" type="button">6</button>
        <button class="coj-btn" onclick="submit(7)" type="button">7</button>
        <button class="coj-btn" onclick="submit(8)" type="button">8</button>
        <button class="coj-btn" onclick="submit(9)" type="button">9</button>
      </div>
      <div class="desc">
        要回答问题，请轻触上面的数字或使用键盘。
      </div>
    </div>
    <p></p>

    <span id="forkongithub"
      ><a href="https://github.com/StylishSite/StylishSite.github.io"
        >Fork me on GitHub</a
      ></span
    >

    <div class="instructions">
      <b>游戏介绍:</b><br /><br />

      适于儿童玩的逻辑游戏。
      <b
        >警告：游戏会大声朗读题目（因为小孩子有可能看不懂问题描述），所以请检查你的设备音量。
        </b
      >
      选择一个关卡<br /><br />
      <ul>
        <li onclick="set_level(0)">0. 初出茅庐</li>
        <li onclick="set_level(1)">1. 小试牛刀</li>
        <li onclick="set_level(2)">2. 崭露头角</li>
        <li onclick="set_level(3)">3. 得心应手</li>
        <li onclick="set_level(4)">4. 大杀四方</li>
        <li onclick="set_level(5)">5. 随心所欲</li>
        <li onclick="set_level(6)">6. 天下无敌</li>
        <li onclick="set_level(7)">7. 不老传说</li>
      </ul>
    </div>
    <br />
    <svg class="hidden" viewbox="0 0 160 140">
      <ellipse class="face" cx="70" cy="95" ry="45" rx="55" />
      <ellipse cx="45" cy="90" rx="5" ry="7" fill="black" />
      <ellipse cx="95" cy="90" rx="5" ry="7" stroke="black" fill="black" />

      <g id="whiskers" class="whiskers">
        <line x1="105" y1="100" x2="135" y2="90" style="stroke: black;" />
        <line x1="105" y1="100" x2="135" y2="110" style="stroke: black;" />
      </g>
      <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
      <!-- ears -->
      <g id="earz" class="ears">
        <polyline
          points="108 62,  103 40,  80 51"
          style="stroke: none; fill: #ff88dd;"
        />
      </g>
      <use xlink:href="#earz" transform="scale(-1 1) translate(-140 0)" />

      <!-- mouth -->
      <!--<polyline points="35 110, 45 120, 95 120, 105, 110"
    style="stroke: black; fill: none;" />-->

      <path
        class="frown"
        d="M 50 110 C 70 90, 80 90, 90 110"
        stroke="black"
        fill="transparent"
      />
      <path
        class="smile"
        d="M 50 110 C 70 120, 80 120, 90 110"
        stroke="black"
        fill="transparent"
      />
      <path
        class="mouth"
        d="M 55 110 C 70 115, 80 115, 85 110"
        stroke="black"
        fill="transparent"
      />

      <!-- nose -->
      <!--<path d="M 75 90 L 65 90 A 5 10 0  0 0 75 90"
   style="stroke: #ff88dd; fill: #ffcccc"/>-->
    </svg>
    <script src="https://code.responsivevoice.org/responsivevoice.js?key=prslTaIB"></script>
    <script
      src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.slim.js"
      integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
      crossorigin="anonymous"
    ></script>
    <script src="./cats-of-jasnah1.js"></script>
  </body>
</html>
